let data = [{
        "count": 4000,
        "price": 1200,
        "unitPrice": "0.3000"
    },
    {
        "count": 8000,
        "price": 2000,
        "unitPrice": "0.2500"
    },
    {
        "count": 40000,
        "price": 8000,
        "unitPrice": "0.2000"
    }
]
let btnList = document.querySelector(".btn-list");
data.forEach(function (v, i) {
    btnList.innerHTML += `
    <li class="fl btn">${v.count}次</li>
    `
});
let btnArr = document.querySelectorAll(".btn");
btnArr[0].classList.add("active");
let price = document.querySelector(".price");
btnArr.forEach(function (v, i) {
    v.onclick = function () {

        btnArr.forEach(function (v2, i2) {
            v2.classList.remove("active");
        });
        v.classList.add("active");
        price.innerHTML = `
         ¥${data[i].price}
         <span>(约${data[i].unitPrice}元/次)</span>`
    }
});
let btns = document.querySelectorAll(".API-content-ul li");
console.log(btns);
let content = document.querySelectorAll(".document,.content-main,.three-main-main,.tel");
console.log(content);
btns.forEach(function (v, i) {
    v.onclick = function () {
        btns.forEach(function (v2, i2) {
            v2.className = "";
        });
        btns[i].className = "border-xia";
        content.forEach(function (v2, i2) {
            v2.style.display = "none";
        });
        content[i].style.display = "block";
    }
});